<template>
  <div
    class="scroll-box"
    ref="scrollBox"
    @mouseover="stopAni"
    @mouseout.capture="startAni"
    @mouseup="mouseup"
    @mousedown="mousedown"
  >
    <div
      class="scroll-body"
      :style="{ 'pointer-events': pointEvent }"
      ref="scrollBody"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    close: {
      type: Boolean,
      default: false
    },
    pointEvent: {
      type: String,
      default: 'none'
    }
  },
  data() {
    return {
      reflashTimer: 0,
      timer: 0,
      timer1: 0,
      timer2: 0,
      timer3: 0,
      mousedownFlag: false
    }
  },
  mounted() {
    if (this.close) return
    this.$nextTick(() => {
      this.stopAni()
      this.startAni()
    })
  },
  methods: {
    stopAni() {
      clearInterval(this.timer)
    },
    startAni(e) {
      if (this.mousedownFlag || this.close) return
      clearTimeout(this.reflashTimer)
      if (!e || e.target === e.currentTarget) {
        setTimeout(() => {
          this.openAnimate()
        }, 3000)
      } else {
        this.reflashTimer = setTimeout(() => {
          this.openAnimate()
        }, 3000)
      }
    },
    openAnimate() {
      let tBox = this.$refs.scrollBox
      let tBody = this.$refs.scrollBody
      if (!tBody) return
      let scrollTop = tBox.scrollTop
      let maxScrollTop = tBody.offsetHeight - tBox.clientHeight
      this.stopAni()
      this.timer = setInterval(() => {
        if (this.mousedownFlag) return
        scrollTop += 0.1
        tBox.scrollTop = scrollTop
        if (scrollTop > maxScrollTop) {
          this.stopAni()
          clearTimeout(this.timer2)
          clearTimeout(this.timer3)
          this.timer2 = setTimeout(() => {
            tBox.scrollTop = 0
          }, 4000)
          this.timer3 = setTimeout(this.openAnimate, 8000)
        }
      }, 4)
    },
    mousedown(e) {
      this.mousedownFlag = true
      this.stopAni()
    },
    mouseup(e) {
      this.mousedownFlag = false
      this.startAni()
    }
  },
  beforeDestroy() {
    this.stopAni()
  }
}
</script>

<style lang="scss" scoped>
.scroll-box {
  height: 100%;
  overflow-y: auto;
}
.scroll-body {
  pointer-events: none;
}
.scroll-box::-webkit-scrollbar-thumb,
.scroll-box::-webkit-scrollbar-track {
  background-color: transparent;
}
.scroll-box:hover::-webkit-scrollbar {
  &-thumb {
    //滑块部分
    background-color: hsla(0, 0%, 53%, 0.4);
  }
  &-track {
    //轨道部分
    background: hsla(0, 0%, 53%, 0.2);
  }
}
</style>
